<!--
 * @Author: lpz1096
 * @Date: 2021-12-07 16:47:47
 * @LastEditors: lpz1096
 * @LastEditTime: 2021-12-09 11:12:23
 * @Description:
 * @FilePath: \ptadmin\src\views\order\account\components\recharge-table.vue
-->
<template>
	<a-table
		:columns="columns"
		:data-source="data"
		:pagination="pagination"
		:loading="loading"
		:row-key="(record, index) => index"
		@change="handleTableChange"
		bordered
	>
		<template v-slot:merchant_name="{ merchant_name }">
			<a-tooltip :title="merchant_name" placement="topLeft">
				{{ merchant_name }}
			</a-tooltip>
		</template>
		<span slot="pay_status" slot-scope="text, record">
			<span
				:class="
					record.pay_status === 1
						? 'success'
						: record.pay_status == -1
						? 'error'
						: 'info'
				"
				>{{ payStatus[record.pay_status] }}</span
			>
		</span>
	</a-table>
</template>

<script>
	import orderAccount from "@/api/orderAccount"
	import day from "@/utils/day"
	const payStatus = {
		"-1": "支付失败",
		0: "未支付",
		1: "支付成功",
		2: "支付中",
	}
	export default {
		props: {
			queryForm: Object,
		},
		data() {
			return {
				data: [],
				loading: false,
				payStatus,
				columns: [
					{
						title: "时间",
						dataIndex: "created_at",
						key: "created_at",
						align: "center",
						customRender: (text) => {
							return day.FormatDate(text)
						},
					},
					{
						title: "商铺名",

						align: "center",
						ellipsis: true,
						key: "merchant_name",
						scopedSlots: {
							customRender: "merchant_name",
						},
					},
					{
						title: "微信单号",
						dataIndex: "chnltrxid",
						align: "center",
						key: "chnltrxid",
					},
					{
						title: "通联单号",
						dataIndex: "trxid",
						align: "center",
						key: "trxid",
					},
					{
						title: "交易单号",
						dataIndex: "order_no",
						align: "center",
						key: "order_no",
					},
					{
						title: "充值金额",
						dataIndex: "pay_amount",
						align: "center",
						key: "pay_amount",
						customRender: (text) => {
							return "￥" + text / 100
						},
					},
					{
						title: "充值状态",
						dataIndex: "pay_status",
						align: "center",
						key: "pay_status",
						scopedSlots: { customRender: "pay_status" },
					},
					// {
					//   title: "操作",
					//   dataIndex: "action",
					//   key: "action",
					//   width: 160,
					//   scopedSlots: { customRender: "action" },
					// },
				],
				pagination: {
					current: 1,
					pageSize: 20,
					total: 0,
					totalPage: 0,
					showSizeChanger: true,
					showTotal: (total) => `总 ${total} 条`,
				},
			}
		},
		mounted() {
			this.search()
		},
		methods: {
			// 搜索
			search() {
				this.data = []
				this.pagination.current = 1
				this.handleTableChange(this.pagination, {}, {})
			},
			handleTableChange(pagination, filters, sorter) {
				this.fetch({
					...filters,
					...this.queryForm,

					pageSize: pagination.pageSize,
					page: pagination.current,
				})
			},
			async fetch(params = {}) {
				this.data = []
				this.loading = true
				await orderAccount.rechargeQuery(params).then((response) => {
					if (response.code !== 1) {
						this.$message.warning(response.message)
						return
					}

					if (response.page) {
						this.pagination.current = response.page["page"]
						this.pagination.pageSize = response.page["pageSize"]
						this.pagination.total = response.page["totalSize"]
						this.pagination.totalPage = response.page["totalPage"]
					}

					if (response.data && response.data.length > 0) {
						this.data = response.data
					}

					return
				})
				this.loading = false
			},
		},
	}
</script>

<style scoped>
	.tooltipLink {
		color: #fff;
	}
	.tooltipLink:hover {
		color: #1890ff;
	}

	.success {
		color: rgba(51, 158, 86);
	}
	.error {
		color: rgba(235, 87, 87);
	}
	.info {
		color: rgba(231, 146, 58);
	}
</style>
